<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
	</head>
	<body>
		<!-- 
			4. 复选框
				垂直显示		.checkbox
				水平显示 		.checkbox-inline
			5. 单选框
				垂直显示		.radio
				水平显示 		.radio-inline
			6. 按钮
				1. 使用按钮
					基础样式:		(.btn)
					附加样式:		
							.btn-default	(默认样式) 		
							btn-primary 	(首选项）Primary)
							btn-success 	(成功)Success
							btn-info 	(一般信息)
							btn-warning		(警告)
							btn-danger		(危险)
							btn-link		(链接)
				2. 多标签使用
					其他标签可以通过添加按钮样式设置成按钮效果!(a标签 span标签)
				3. 按钮大小
					大按钮 		.btn-lg
					较小按钮		.btn-sm
					小按钮		.btn-xs
				4. 按钮禁用
					1. 通过disabled属性  (真正的按钮禁用)
					2. 通过disabled样式(类名)	(形式上禁用)
						
				
		 -->
		 
		 <!-- 4. 复选框 -->
		 <!-- row 行元素 一行12个   垂直显示-->
		 <p>复选框 垂直显示/水平显示</p>
		 <div class="row">
			 <div class="col-md-3">
				<div class="checkbox">
					 <label for=""><input type="checkbox" name="hobby" value="sing" >唱歌</label>
				</div>
				<div class="checkbox">
					 <label for=""><input type="checkbox" name="hobby" value="sing" >唱歌</label>
				</div>
			 </div>
		 </div>
		 
		 <!-- 水平显示 -->
		 <div class="row">
		 			 <div class="col-md-3">
						 <label for="" class="checkbox-inline">
							 <input type="checkbox" name="hobby" value="sing" >唱歌
						 </label>
						 <label for="" class="checkbox-inline">
						 	<input type="checkbox" name="hobby" value="sing" >唱歌
						 </label>
		 			 </div>
		 </div>
		 
		 <hr color="red">
		 <!--  单选框-->
		 <!-- 垂直显示 -->
		  <p>单选框 垂直显示/水平显示</p>
		 <div class="row">
		 			 <div class="col-md-3">
		 				<div class="radio">
		 					 <label for=""><input type="radio" name="sex" value="男" >男</label>
		 				</div>
		 				<div class="radio">
		 					 <label for=""><input type="radio" name="sex" value="女" >女</label>
		 				</div>
		 			 </div>
		 </div>
		 
		 <!-- 水平显示 -->
		 <div class="row">
		 			 <div class="col-md-3">
		 						 <label for="" class="radio-inline">
		 							 <input type="radio" name="sex" value="男" >男
		 						 </label>
		 						 <label for="" class="radio-inline">
		 						 	<input type="radio" name="sex" value="女" >女
		 						 </label>
		 			 </div>
		 </div>
		 
		 <hr color="red">
		 <!-- 按钮 -->
		 <span>原型</span>
		 
		 <button>按钮</button>
		 <input type="button" value="按钮" name="" id="">
		 
		 <br>
		 <br>
		 
		 <span>加样式的按钮</span>
		 <button class="btn">基础样式(btn)</button>
		 
		 <button type="button" class="btn btn-default">（默认样式）Default</button>
		 
		 <button type="button" class="btn btn-primary">（首选项）Primary</button>
		
		 <button type="button" class="btn btn-success">（成功）Success</button>
		 
		 <!-- Contextual button for informational alert messages -->
		 <button type="button" class="btn btn-info">（一般信息）Info</button>
		 
		 <!-- Indicates caution should be taken with this action -->
		 <button type="button" class="btn btn-warning">（警告）Warning</button>
		 
		 <!-- Indicates a dangerous or potentially negative action -->
		 <button type="button" class="btn btn-danger">（危险）Danger</button>
		 
		 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
		 <button type="button" class="btn btn-link">（链接）Link</button>
		 
		 <br><br>
		 <span>其他标签转换为按钮</span>
		 <a href="#" class="btn btn-info">a标签</a>
		 <span class="btn btn-danger">span标签</span>
		 <div class="btn btn-primary">div标签</div>
		 
		 <br><br>
		 <!-- 设置按钮大小! -->
		 <button type="button" class="btn btn-danger">正常按钮大小</button>
		 <button type="button" class="btn btn-success btn-lg">增大按钮</button>
		 <button type="button" class="btn btn-success btn-sm">较小按钮</button>
		 <button type="button" class="btn btn-success btn-xs">更小按钮</button>
		 
		 <br><br>
		 <!-- 按钮禁用 -->
		 
		  <button type="button" class="btn btn-danger" onclick="alert('你好')">按钮</button>
		  <!-- 禁用  disabled-->
		  <button type="button" class="btn btn-danger" onclick="alert('你好')" disabled>禁止按钮</button>
		 <!-- 加类 disabled  只是禁用了按钮 ,但功能不禁止,依然可以输出你好!-->
		  <button type="button" class="btn btn-danger disabled" onclick="alert('你好')">按钮禁止 功能不禁止</button>
	</body>
</html>